<template>
  <a-modal v-bind:visible="isShowPlan" width="30%" title="修改单一 子计划" @ok="handleOk" @cancel="onCancel">
    <a-form-model :label-col="{ span: 5 }" :wrapper-col="{ span: 17 }">
      <a-form-model-item label="交易时间">
        <a-date-picker
          v-model="formData.trade_time"
          style="width: 100%"
          @change="onChange"
          show-time
          placeholder="请选择交易时间"
        />
      </a-form-model-item>
      <a-form-model-item label="交易金额">
        <a-input-number v-model="formData.trade_amount" style="width: 100%" id="inputNumber" />
      </a-form-model-item>
      <a-form-model-item label="状态">
        <a-select v-model="formData.status" style="width: 100%">
          <a-select-option v-for="item in options" :key="item.id" :value="item.id">{{ item.name }}</a-select-option>
        </a-select>
      </a-form-model-item>
    </a-form-model>
  </a-modal>
</template>

<script>
import { getStatusInfoAPI, editPlanInfoAPI } from '@/api/transaction.js'
export default {
  name: 'EditContent',
  props: {
    isShowPlan: {
      type: Boolean,
      default: false
    },
    date: {
      type: String,
      default: ''
    },
    status: {
      type: null,
      default: null
    },
    trade_time: {
      type: String,
      default: ''
    },
    trade_amount: {
      type: String,
      default: ''
    },
    id: {
      type: Number,
      default: undefined
    },
    utime: {
      type: String,
      default: ''
    }
  },
  watch: {
    async isShowPlan(boolean) {
      this.formData.trade_time = this.trade_time
      this.formData.id = this.id
      this.formData.status = this.status
      this.formData.trade_amount = this.trade_amount
      this.formData.utime = this.utime
      if (boolean) {
        const { data } = await getStatusInfoAPI({
          brand_id: process.env.VUE_APP_BRAND_ID,
          date: this.date,
          plan_id: this.$route.query.id,
          scene: ''
        })
        this.options = data.plan_status_list
      }
    }
  },
  data() {
    return {
      formData: {
        brand_id: process.env.VUE_APP_BRAND_ID,
        id: '',
        trade_time: '',
        trade_amount: '',
        status: '',
        utime: ''
      },
      options: []
    }
  },
  methods: {
    onChange(value, date) {
      this.formData.trade_time = date
    },
    async handleOk() {
      try {
        const result = await editPlanInfoAPI(this.formData)
        console.log(result)
        this.$message.success('操作成功')
        this.$emit('upload')
        this.$emit('update:isShowPlan', false)
      } catch (error) {
        this.$message.error(error.data.msg)
      }
    },
    onCancel() {
      this.$emit('update:isShowPlan', false)
    }
  }
}
</script>

<style lang="less" scoped></style>
